<%--
  Created by IntelliJ IDEA.
  User: lq
  Date: 2016/12/14/0014
  Time: 14:31
  To change this template use File | Settings | File Templates.
--%>
<%@page import="com.rivercloud.entity.UserVo"%>
<%@page import="java.util.List"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>文件列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>
		<!-- <script type="text/javascript">
							var flag="";
							var tdId="";
							function hb(obj) {
								 flag=flag=="end"?"end":obj.getAttribute("my");
								if(flag=="strat"){
									tdId=obj.id;
									flag="end";
								}else{
									var indexId=obj.id;
									if(indexId>tdId){
									/* 	for (var i = indexId; i > tdId; i--) {
											document.getElementById(i).style.visibility="hidden";
										} */
									
										tb.rows[0].removeChild(tb.rows[0].cells[1]); 
										tb.rows[startRow].cells[col].colSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1; 
										
										
										
									}else if(indexId<tdId){
										/* for (var i = indexId; i < tdId; i++) {
											document.getElementById(i).visibility.display="hidden";
										} */
										document.getElementById(indexId).colspan=(tdId-indexId);
									}
								}
								
								
								
							}
						</script> -->

</head>
<body>
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>

		<button type="button" class="btn btn-primary" id="tableName">${tableName}</button>
		<br>
		
		<div style="overflow-x: scroll; width: 100%; white-space: nowrap;">
			<div style="overflow-y: scroll; white-space: nowrap; height: 420px;">
				<table id="table"  class="table table-condensed table table-bordered"
					style="width: 100%; table-layout: fixed; margin-top: 50px"
					align="center" id="table">
					<tbody id="tbody">
						<tr class="tr"   style="height: 40px;">
						
							<c:forEach items="${title}" var="ti"   varStatus="index">
								<%-- <td style="background-color: #EC971F; width: 150px"><a>${ti}</a></td> --%>
								<td class="td"   style="width: 120px;"><input type="button"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"
									value="${ti.toString().trim()}" /></td>
							</c:forEach>
						</tr>
			
					
						
					

						<%-- <c:forEach items="${data}" var="ds">
							<c:set var="a" value="1"></c:set>
							<tr class="tr" style="height: 40px">

									<c:forEach items="${ds}" var="d">
									<c:forEach items="${colNumList}" var="colNum">
										<c:choose>
											<c:when  test="${fn:contains(colNumList,a) }">
											<c:when  test="false">

												<td class="td" style="width: 120px;"><input
													onchange="aaa()" type="text"
													style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"
													value="下拉框" /></td>
											</c:when>
											<c:otherwise>
												<td class="td" style="width: 120px;"><input
													onchange="aaa()" type="text"
													style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"
													value="${d}" /></td>
											</c:otherwise>

										</c:choose>
										<c:set var="a" value="${a+1}"></c:set>

									</c:forEach>

								</c:forEach>
							</tr>
						</c:forEach> --%>
						
						<c:forEach items="${data}" var="ds" varStatus="i">
							<tr class="tr" style="height: 30px;">
							
							<c:set var="a" value="0"></c:set>
							<c:forEach items="${tableColList}" var="tableCol"  >
								<c:if test="${tableCol.colType==0}">
								
								<td class="td" style="width: 5%;height:auto;" ><input
										type="text" onchange="textbox()"
										style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"
										value='${ds[a].toString().trim()}'></td>
										
								</c:if>
								<c:set var="avv" scope="request"  value="${i.index}"></c:set>
								<c:if test="${tableCol.colType==1}">
									<c:set value="${ fn:split(tableCol.defVal, '||') }" var="val" />
									
									<c:set var = "x" value = "${ds[a].toString().trim()}"></c:set>
									<c:out value = "${aa}"></c:out>
									
									<td class="td" style="width: 5%;height:auto;"><select  id="ssss${avv}"
										style="width: 100px; height: 30px;" onchange="dropDown(this)">
											<c:forEach items="${val}" var="va"   varStatus="i">
											
												<c:choose>
												
												
												<c:when test="${x != (fn:substring(va,0,fn:indexOf(va,'#'))).trim()}">
													<option  class="${fn:substring(va,fn:indexOf(va,'#'),fn:length(va))}" >${fn:substring(va,0,fn:indexOf(va,'#'))}</option>
												
												</c:when>
												
												
												<c:otherwise>
													<option  class="${fn:substring(va,fn:indexOf(va,'#'),fn:length(va))}"    id="${fn:substring(va,fn:indexOf(va,'#'),fn:length(va))}" selected="selected">${fn:substring(va,0,fn:indexOf(va,'#'))}</option>
												</c:otherwise>
												</c:choose> 
										
											</c:forEach>
													<script type="text/javascript">
								     var ooo=document.getElementById("ssss"+'${avv}');
								     var index=ooo.selectedIndex; //序号，取当前选中选项的序号
									 var bg= ooo.options[index].id;
								     ooo.style.background=bg; 
									</script>
									</select></td>
									
									
									
									
								</c:if>
								<c:set var="a" value="${a+1}"></c:set>
							</c:forEach>
							
						</tr>
						
					</c:forEach>
					</tbody>
				</table>
			</div>

			<button type="button" class="btn btn-primary" onclick="addRow()">增加一行</button>
			<button type="button" class="btn btn-primary" onclick="addCell()">增加一列</button>
			<a href="${pageContext.request.contextPath}/table/changeStatuFinish?projectId=${project.id }&tableId=${tableId}"><button type="button" class="btn btn-primary">标记为已完成</button></a>
			<button type="button" class="btn btn-primary" onclick="collection(${user.id},${tableId })">添加关注</button>
										<c:set scope="page" value="manager" var="pagein"></c:set>
										<!-- 为每个要判断的按钮或者功能定义一个变量，对应数据库后台的权限表中的keyword字段 -->
							 <% 
								  String pageDelete=(String)pageContext.getAttribute("pagein");
								  //然后改变这里取出来
								  System.out.print(pageDelete);
								  UserVo userVo=(UserVo)session.getAttribute("userVo");
								  System.out.print(userVo);
								  if(userVo != null){
								  String keyword=userVo.getrKeyword();
								  System.out.println(keyword);
								 String [] keywords=keyword.split(",");
									  Boolean flag=false;
									 
										  flag=keyword.equals(pageDelete);//这里改变，最后就能实现了
									  
									  System.out.println(userVo.getuName()+"权限为："+flag);
									   if(flag){
								%>
			<button class="btn btn-primary" data-toggle="modal"
				data-target="#myModal">存为模板</button>
			<!--  定义模态框触发器，此处为按钮触发  -->
				<%
									   }
								  }
				%>
			
			<form method="post" action="${pageContext.request.contextPath}/tpl/toTemplate?tableId=${tableId}&userId=${user.id}" class="form-horizontal" role="form"
				id="myForm" onsubmit="return ">
				<div class="modal fade" id="myModal" role="dialog" tabindex=-1
					aria-labelledby="myModalLabel" aria-hidden="true">
					<!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
					<div class="modal-dialog">
						<!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
						<div class="modal-content">
							<!--  显示模态框白色背景，所有内容都写在这个div里面  -->

							<div class="btn-info modal-header">
								<!--  模态框标题  -->
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<!--  关闭按钮  -->
								<h4>存为模板</h4>
								<!--  标题内容  -->
							</div>

							<div class="modal-body">
								<!--  模态框内容，我在此处添加一个表单 -->
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="templateName" class="col-sm-3 control-label">模板名称：</label>
										<div class="col-sm-6">
											<input type="text" id="templateName" name="templateName"
												class="form-control well" placeholder="请输入模板名" />
												<span id="s1"></span>
										</div>
									</div>
									
								</form>
							</div>

							<div class="modal-footer">
								<!--  模态框底部样式，一般是提交或者确定按钮 -->
								<button type="submit" class="btn btn-info">确定</button>
								<button type="button" class="btn btn-default"
									data-dismiss="modal">取消</button>
							</div>

						</div>
						<!-- /.modal-content -->
					</div>
				</div>
				<!-- /.modal -->
			</form>

		</div>
	</div>
</body>
<script type="text/javascript">
	
		function collection(userId,tableId) {
			
			
		 	$.ajax({
				url : "${base}/user/collection",
				data : {
					"userId" : userId,
					"tableId" : tableId
				},
				type : "POST",
				success : function() {
					location.reload();
				},
				async : true,
				cache : false
			}); 
		}
	

	function dropDown(obj) {
		
	    var index=obj.selectedIndex; //序号，取当前选中选项的序号
	  
	    var ccc=obj.options[index].className;
	     obj.style.background=ccc;
		   
		var map = {};
		

		var rows = table.rows.length;
		
		var cells = table.rows.item(0).cells.length;
		
		for (var i = 0; i < rows; i++) {
			var cellValue = [];
			for (var j = 0; j < cells; j++) {
				valuej = table.rows.item(i).cells.item(j).childNodes[0].value;
				
				cellValue[j] = valuej;
			}
			map[i.toString()] = cellValue;
		}
		var json = JSON.stringify(map);
		var params = JSON.stringify(json);
		
		var tableName = $("#tableName").html();
		
		console.log(tableName);
		$.ajax({
			url : "${base}/excel/save",
			data : {
				"json" : params,
				"tableName" : tableName
			},
			type : "POST",
			success : function() {
				
			},
			async : true,
			cache : false
		});
	}
	function textbox() {
		
		
		var map = {};
		

		var rows = table.rows.length;
		
		var cells = table.rows.item(0).cells.length;
		
		for (var i = 0; i < rows; i++) {
			var cellValue = [];
			for (var j = 0; j < cells; j++) {
				valuej = table.rows.item(i).cells.item(j).childNodes[0].value;
				
				cellValue[j] = valuej;
			}
			map[i.toString()] = cellValue;
		}
		var json = JSON.stringify(map);
		var params = JSON.stringify(json);
		alert(params);
		var tableName = $("#tableName").html();
		
		console.log(tableName);
		$.ajax({
			url : "${base}/excel/save",
			data : {
				"json" : params,
				"tableName" : tableName
			},
			type : "POST",
			success : function() {
				
			},
			async : true,
			cache : false
		});
	}
	function addRow() {
		var tr = document.createElement('tr');
		tr.className = "tr";
		var tbody = document.getElementById("tbody");
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		tbody.appendChild(tr);
		for (var i = 0; i < cells; i++) {
			var inputi = document.createElement('input');
			inputi.style.border = "none";
			inputi.style.height = "46px";
			inputi.style.font.size = "10px";
			var tdi = document.createElement('td');
			tdi.appendChild(inputi);
			tdi.className = "td";
			tdi.style.height = "46px";
			tdi.style.width = " 5%";
			tr.appendChild(tdi);
		}
	}
	function addCell() {
		$(".tr")
				.append(
						'<td style="height:30px;width:5%"class="td"><input type="text" style="border:none;height:46px;font-size:10px"></td>');
	}

/* 	$(".td").bind("mouseover", function() {
		$(this).css("background-color", "#EEA236");
	})
	$(".td").bind("mouseout", function() {
		$(this).css("background-color", "#ffffff"); 
	})*/
</script>


</html>
